<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<style type="text/css">
		.wrapper{
			width: 400px;
			min-height: 200px;
			border: 1px solid #ccc;
			margin-top: 100px;
		}
		.header{
			height: 45px;
			line-height: 45px;
			background-color: #8eb9f5;
			text-align: center;
			color: #fff;
		}
		.header h3{
			margin: 0;
			padding-right:20px; 
		}
		.item{
			padding: 20px;
		}
		.item button{
			background-color: #8eb9f5;
			color: #fff;
			height: 35px;
			line-height: 35px;
			margin-top: 15px;
			margin-right: 10px;
			border: none;
			border-radius: 5px;
		}
	</style>
</head>
<body>
<div class="wrapper">
	<div class="header">
		<h3><span class="iconfont icon-fanhui" style="float:left;margin-left:30px;font-size:20px;"></span>请选择省份</h3>
	</div>

	<div class="area-wrapper" style="position: absolute;">
		<!--省-->
		<div class="province item">
			<button>广西壮族自治区</button>
			<button>广东</button>
			<button>湖南</button>
			<button>湖北</button>
			<button>福建</button>
		</div>
		<!--市-->
		<div class="city item" style="position: relative;left: 410px;top: -70px; height: 40px;width: 300px;border:1px solid #ccc; display:none;">
			<button>柳州</button>
			<button>广州</button>
			<button>长沙</button>
			<button>吉安</button>
			<button>福州</button>
		</div>
		<!--区-->
		<div class="area item" style="position: relative;left: 770px; top: -130px; height: 40px;width: 300px;border:1px solid #ccc; display:none;">
			<button>鱼峰区</button>
			<button>城中区</button>
			<button>柳南区</button>
			<button>柳北区</button>
			<button></button>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript">

	$('.icon-fanhui').click(function(){

		/*city框的显隐状态*/
		var cflag=$('.city').css('display');

		/*area*/
		var aflag=$('.area').css('display');
		
		if(cflag=='block'&&aflag=='block'){
			$('.area').hide();

		}
		if(cflag=='block'&&aflag=='none'){
			$('.city').hide();
			
		}

	})
	function compselect(){
		$('.city').hide();
		$('.area').hide();

	}


	/**初始化省份div框
	1.先把省份div框中的静态数据移除掉
	**/

	function showarea(btn){
		/**获取城市按钮的value值**/
		var cid = $(btn).val();

		/**隐藏province，city这两个div，同时展示area面板内容**/
		$('.province').show();
		$('.area').show();
		$('.city').show();

		/**获取信息并过滤**/
		$.get('area.json',function(res){
			/**过滤数据**/
			var tmp=[];
			for(var i=0;i<res.length;i++){
				if(cid==res[i].pid){
					tmp.push(res[i]);
				}
			}

			/**显示数据**/
			$('.area').empty();
				for(var i=0;i<tmp.length;i++){

				var btn = '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';

				$('.area').append(btn);
			}
		})
	}


	function showcity(btn){
		/**获取省份按钮的value值--id**/
		var pid = $(btn).val();

		/**隐藏province，area这两个div，同时展示city面板内容**/
		$('.province').show();
		$('.area').hide();
		$('.city').show();

		/**获取所有城市信息并过滤**/
		$.get('city.json',function(res){
			/**过滤城市的数据**/
			var tmp=[];
			for(var i=0;i<res.length;i++){
				if(pid==res[i].pid){
					tmp.push(res[i]);
				}
			}

			/**将省份下面的城市显示到.city div下面**/
			$('.city').empty();
				for(var i=0;i<tmp.length;i++){

				var btn = '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';

				$('.city').append(btn);
			}
		})
	}

	function InitProvince(){
		$('.province').empty();

		$.get('province.json',function(res){
			for(var i=0;i<res.length;i++){
				/**用字符串拼接一个 button**/
				var btn='';

				btn = '<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';

				$('.province').append(btn);
			}
		});
	}
	InitProvince();
</script>
</body>
</html>